<template>
  <div class="login">
    <!--背景色-->
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="box">
      <!--背景圆-->
      <div class="circlre" style="--x: 0"></div>
      <div class="circlre" style="--x: 1"></div>
      <div class="circlre" style="--x: 2"></div>
      <div class="circlre" style="--x: 3"></div>
      <div class="circlre" style="--x: 4"></div>
      <!--登录框-->
      <div class="loginContent">
        <div class="form">
          <h2>登录</h2>
          <form>
            <div class="inputBox">
              <input
                type="text"
                name="phone"
                class="phone"
                v-model="phone"
                placeholder="请输入手机号码"
              />
            </div>
            <div class="inputBox">
              <input
                type="password"
                name="passworld"
                class="passworld"
                v-model="password"
                placeholder="请输入密码"
              />
            </div>
            <div class="inputBox">
              <button class="btn" @click="Login">登录</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getLoginUser } from "@/request/api/home.js";
export default {
  data() {
    return {
      phone: "",
      password: "",
    };
  },
  methods: {
    Login: async function () {
      let res = await this.$store.dispatch("getLogin", {
        phone: this.phone,
        password: this.password,
      });
      console.log(res);
      if (res.data.code === 200) {
        //如果返回的code等于200，说明登录成功，就跳转个人中心页面
        this.$store.commit("updateIsLogin", true);
        this.$store.commit("updateToken", res.data.token);
        let result = await getLoginUser(res.data.account.id);
        console.log(result);
        this.$store.commit("updateUser", result);
        this.$router.push("/infoUser");
      } else {
        alert("手机号码或者密码错误");
        this.password = "";
      }
    },
  },
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
//垂直水平居中
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, #f1f4f9, #dff1ff);
  .color {
    position: absolute;
    filter: blur(250px);
  }
  .color:nth-child(1) {
    top: -350px;
    width: 600px;
    height: 600px;
    background: #ff359d;
  }
  .color:nth-child(2) {
    bottom: -150px;
    left: 100px;
    width: 500px;
    height: 500px;
    background: #fffd87;
  }
  .color:nth-child(3) {
    bottom: 50px;
    right: 100px;
    width: 500px;
    height: 500px;
    background: #00d2ff;
  }
  .box {
    position: relative;
  }
  .box .circlre {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    filter: hue-rotate(calc(var(--x) * 80deg));
    animation: animate 10s linear infinite;
    animation-delay: calc(var(--x) * -2s);
    border-radius: 50%;
  }
  @keyframes animate {
    0%,
    100% {
      transform: translateY(-50px);
    }
    50% {
      transform: translateY(50px);
    }
  }
  .box .circlre:nth-child(1) {
    top: -50px;
    right: -60px;
    width: 100px;
    height: 100px;
  }
  .box .circlre:nth-child(2) {
    top: 150px;
    left: -100px;
    width: 120px;
    height: 120px;
    z-index: 2;
  }
  .box .circlre:nth-child(3) {
    bottom: 50px;
    right: -60px;
    width: 80px;
    height: 80px;
    z-index: 2;
  }
  .box .circlre:nth-child(4) {
    bottom: -80px;
    right: 100px;
    width: 60px;
    height: 60px;
    z-index: 2;
  }
  .box .circlre:nth-child(5) {
    top: -80px;
    right: 140px;
    width: 60px;
    height: 60px;
    z-index: 2;
  }
  //登录框样式
  .loginContent {
    position: relative;
    width: 350px;
    min-height: 350px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .form {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 50px;
  }
  //登录标题样式
  .form h2 {
    position: relative;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 5px;
    margin-bottom: 30px;
    cursor: pointer;
  }
  //登录标题下划线样式
  .form h2::before {
    content: "";
    position: absolute;
    bottom: -5px;
    width: 0px;
    height: 3px;
    background: #fff;
    transform: 0.5s;
  }
  .form h2:hover::before {
    width: 53px;
  }
  .form .inputBox {
    width: 100%;
    margin-top: 20px;
  }
  .form .inputBox input,
  .form .inputBox button {
    width: 100%;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.3);
    outline: none;
    border: none;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 16px;
    letter-spacing: 1px;
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  }
  .form .inputBox input::placeholder,
  .form .inputBox button::placeholder {
    color: #fff;
  }
  //登录按钮样式
  .form .inputBox button {
    background: #fff;
    color: #666;
    max-width: 120px;
    margin-bottom: 20px;
    font-weight: 600;
    cursor: pointer;
  }
}
</style>
